<template>
	<view>
		<view class="p-20px pb-120px">
			<uv-form>
				<view class="p-20px mb-20px bg-white rounded-20px">
					<view class="font-bold py-10px">订单导出</view>
					<uv-line margin="20rpx 0"></uv-line>
					<uv-form-item label="导出类型" borderBottom labelWidth="80" @click="showActions(1)">
						<uv-input v-model="state.type1" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
						</uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-action-sheet ref="actionsRef1" :actions="state.actions1" @select="(e)=>{selectAction(e,1)}"></uv-action-sheet>
					<uv-form-item label="邮件地址" borderBottom labelWidth="80">
						<uv-input v-model="state.email1" border="none">
						</uv-input>
					</uv-form-item>
					<uv-text class="pt-10px" type="warning" text="备注: 请输入邮件地址，系统将数据生成EXCEL格式发送至指定邮箱地址。"></uv-text>
					<uv-button type="primary" text="发送订单" customStyle="margin-top: 10px" @click="handleSend(1)"></uv-button>
				</view>
				
				<view class="p-20px mb-20px bg-white rounded-20px">
					<view class="font-bold py-10px">订单导出</view>
					<uv-line margin="20rpx 0"></uv-line>
					<uv-form-item label="导出类型" borderBottom labelWidth="80" @click="showActions(2)">
						<uv-input v-model="state.type2" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
						</uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-action-sheet ref="actionsRef2" :actions="state.actions2" @select="(e)=>{selectAction(e,2)}"></uv-action-sheet>
					<uv-form-item label="邮件地址" borderBottom labelWidth="80">
						<uv-input v-model="state.email2" border="none">
						</uv-input>
					</uv-form-item>
					<uv-text class="pt-10px" type="warning" text="备注: 请输入邮件地址，系统将数据生成EXCEL格式发送至指定邮箱地址。"></uv-text>
					<uv-button type="primary" text="发送订单" customStyle="margin-top: 10px" @click="handleSend(2)"></uv-button>
				</view>
				
				<view class="p-20px mb-20px bg-white rounded-20px">
					<view class="font-bold py-10px">佣金数据导出</view>
					<uv-line margin="20rpx 0"></uv-line>
					<uv-form-item label="导出类型" borderBottom labelWidth="80" @click="showActions(3)">
						<uv-input v-model="state.type3" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
						</uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-action-sheet ref="actionsRef3" :actions="state.actions3" @select="(e)=>{selectAction(e,3)}"></uv-action-sheet>
					<uv-form-item label="导出类型" borderBottom labelWidth="80" @click="showActions(32)">
						<uv-input v-model="state.type32" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
						</uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-action-sheet ref="actionsRef32" :actions="state.actions32" @select="(e)=>{selectAction(e,32)}"></uv-action-sheet>
					<uv-form-item label="邮件地址" borderBottom labelWidth="80">
						<uv-input v-model="state.email3" border="none">
						</uv-input>
					</uv-form-item>
					<uv-text class="pt-10px" type="warning" text="备注: 请输入邮件地址，系统将数据生成EXCEL格式发送至指定邮箱地址。"></uv-text>
					<uv-button type="primary" text="发送订单" customStyle="margin-top: 10px" @click="handleSend(3)"></uv-button>
				</view>
				
				<view class="p-20px mb-20px bg-white rounded-20px">
					<view class="font-bold py-10px">推荐人数据导出</view>
					<uv-line margin="20rpx 0"></uv-line>
					<uv-form-item label="邮件地址" borderBottom labelWidth="80">
						<uv-input v-model="state.email4" border="none">
						</uv-input>
					</uv-form-item>
					<uv-text class="pt-10px" type="warning" text="备注: 请输入邮件地址，系统将数据生成EXCEL格式发送至指定邮箱地址。"></uv-text>
					<uv-button type="primary" text="发送订单" customStyle="margin-top: 10px" @click="handleSend(4)"></uv-button>
				</view>
				
			</uv-form>
			<uv-toast ref="toast"></uv-toast>
		</view>
		<BackWorkSpace></BackWorkSpace>
	</view>
</template>

<script setup name="ExportOrder">
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue';
	import BackWorkSpace from '@/components/BackWorkSpace.vue'

	const actionsRef1 = ref()
	const actionsRef2 = ref()
	const actionsRef3 = ref()
	const actionsRef32 = ref()
	const state = reactive({
		type1: '导出全部订单',
		email1: '',
		actions1: [{
				name: '导出全部订单',
				value: '0'
			},
			{
				name: '已支付订单',
				value: '1'
			},
			{
				name: '未支付订单',
				value: '2'
			},
		],
		
		type2: '按团导出',
		email2: '',
		actions2: [{
				name: '按团导出',
				value: '0'
			},
			{
				name: '按商品导出',
				value: '1'
			},
		],
		
		type3: '导出全部订单',
		email3: '',
		actions3: [{
				name: '导出全部订单',
				value: '0'
			},
			{
				name: '已打款',
				value: '1'
			},
			{
				name: '未打款',
				value: '2'
			},
		],
		
		type32: '导出全部订单',
		actions32: [{
				name: '导出全部订单',
				value: '0'
			},
			{
				name: '一级红包',
				value: '1'
			},
			{
				name: '溯源红包',
				value: '2'
			},
			{
				name: '盲盒抽奖红包',
				value: '3'
			},
			{
				name: '满团团长红包',
				value: '4'
			},
		],
		
		email4: '',
	})

	const toast = ref()
	const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

	const checkEmail = (val) => {
		if (!emailReg.test(val)) {
			toast.value.show({
				message:'邮箱格式不正确'
			})
			return false
		}else{ 
			return true
		}
	}

	const showActions = (index) => {
		switch(index){
			case 1: actionsRef1.value.open();break;
			case 2: actionsRef2.value.open();break;
			case 3: actionsRef3.value.open();break;
			case 32: actionsRef32.value.open();break;
		}
	}
	const selectAction = (e,index) => {
		state['type'+index] = e.name;
	}

	const handleSend = (index) => {
		if(checkEmail(state['email'+index])){
			console.log(`调用 导出${index} 接口`);
		}
	}
</script>

<style lang="scss">
	page {
		background: rgb(61, 114, 255);
	}
</style>